<template>
  <div class="container">
    <h1 class="main-title">One File</h1>
    <el-card style="width: 550px">
      <template #header>
        <div>
          <div class="share-email">{{ simpleShareData.email }}</div>
          <div class="share-time">分享于 {{ simpleShareData.shareTime }}</div>
          <div class="share-name">分享文件: {{ simpleShareData.shareName }}</div>
        </div>
      </template>

      <div>
        <div class="extraction-title">请输入提取码：</div>
        <div class="extraction-input-group">
          <el-input
            v-model="shareCode"
            maxlength="6"
            placeholder="请输入提取码"
            show-word-limit
            type="text"
          ></el-input>
          <el-button type="primary" @click="checkShareCode">提取文件</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { checkShareCodeService, getShareService } from '@/api/share.js'
  import { ElLoading, ElMessage } from 'element-plus'
  import router from '@/router/index.js'

  const route = useRoute()

  const simpleShareData = reactive({
    email: '',
    shareTime: '',
    shareName: ''
  })

  const shareCode = ref(null)

  const getShare = async () => {
    const loading = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
      const res = await getShareService(route.params.identifier)

      if (res.code === 40303) {
        await router.push('/share/404')
        return
      }

      simpleShareData.email = res.data.shareUserInfoVO.email
      simpleShareData.shareTime = res.data.shareTime
      simpleShareData.shareName = res.data.shareName
    } catch (err) {
      console.error(err)
    } finally {
      loading.close()
    }
  }

  const checkShareCode = async () => {
    const res = await checkShareCodeService(route.params.identifier, shareCode.value)
    console.log(res)
    ElMessage.warning('提取码正确，但是功能待开发')
    shareCode.value = null
  }

  onMounted(() => {
    getShare()
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -80px;
    min-height: 100vh;

    .main-title {
      color: #3992ff;
      text-align: center;
      font-size: 28px;
      margin-bottom: 30px;
    }
  }

  .share-email {
    font-weight: 700;
    margin-bottom: 8px;
  }

  .share-time,
  .share-name {
    color: #666;
    margin-bottom: 5px;
  }

  .extraction-title {
    margin-bottom: 10px;
    font-weight: 700;
    color: #636d7e;
  }

  .extraction-input-group {
    display: flex;
    gap: 10px;
  }
</style>
